<template>
  <div>
    <center align="center">
      <h1><span style="color: red">========#</span>司机订单界面<span style="color: red">#========</span></h1>
    </center>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="订单号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="乘客邮箱" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.passengerPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起点" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.startAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="终点" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.endAddress }}</span>
        </template>
      </el-table-column>
      <!--订单状态 0：订单开始 1：司机赶往起点  2：司机到达乘客起点 3：乘客上车，司机开始行程 4：到达目的地，行程结束，未支付 5：发起收款 6: 支付完成 7.乘客取消订单 10:去接乘客 11:待派订单-->
      <el-table-column label="订单状态" width="180">
        <template slot-scope="scope">
<!--          <span style="margin-left: 10px">{{ scope.row.status }}</span>-->
          <span style="margin-left: 10px" v-if="scope.row.status == 0">订单开始</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 1">赶往起点</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 2">到达起点</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 3">乘客上车</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 4">订单已完成</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 5">已发起收款</span>
          <span style="margin-left: 10px" v-if="scope.row.status == 6">支付完成</span>
        </template>
      </el-table-column>
      <el-table-column label="是否支付" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.isPaid == 0">待支付</span>
          <span style="margin-left: 10px" v-if="scope.row.isPaid == 1">已支付</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="driverArriveOrigin(scope.row.orderNumber)"
                     v-if="scope.row.status == 1"
          >已到达起点
          </el-button>
          <el-button size="mini" type="danger" @click="passengerAboard(scope.row.orderNumber)"
                     v-if="scope.row.status == 2"
          >乘客已上车
          </el-button>
          <el-button size="mini" type="danger" @click="driverDestination(scope.row.orderNumber)"
                     v-if="scope.row.status == 3"
          >乘客已送达
          </el-button>
          <el-button size="mini" type="danger" @click="sponsorGathering(scope.row.orderNumber)"
                     v-if="scope.row.status == 4"
          >发起收款
          </el-button>
          <el-button size="mini" type="danger" @click="queryValuation(scope.row)"
                     v-if="scope.row.status == 5 || scope.row.status == 6"
          >查看订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- Form -->
    <el-dialog title="填写过路费" :visible.sync="dialogFormVisible">
      <el-form :model="RequestValuation">
        <el-form-item label="订单号:" :label-width="formLabelWidth">
          <el-input v-model="RequestValuation.orderNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="过路费:" :label-width="formLabelWidth">
          <el-input v-model="RequestValuation.valuationTollPrice" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="gathering">确 定</el-button>
      </div>
    </el-dialog>
    <!-- Form -->
<!--    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

    <el-dialog title="金额明细" :visible.sync="dialogForm">
      <el-form :model="orderInfo">
        <el-form-item label="订单编号" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.orderNumber" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="起步价" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationBeginPrice + '  元' " autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="路程价格" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationKmPrice + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="过路费" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationTollPrice + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="特殊时间加价" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationSpecial + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="特殊车型加价" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationCarType + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="时间价格" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationTimePrice + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>
        <el-form-item label="总价格" :label-width="formLabelWidth">
          <el-input v-model="orderInfo.valuationSumPrice + '  元'" autocomplete="off" :disabled="inputDisabled"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="dialogForm = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { selectByDriverId, selectOrderByDriverId, updateUserReach, valuationOrderByNumber } from '@/api/driver/driver'
import { getInfo } from '@/api/login'
import { orderNumber } from '@/api/system/module'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      inputDisabled: true,
      orderInfo:{
        valuationBeginPrice:'',
        valuationKmPrice:'',
        valuationTimePrice:'',
        valuationTollPrice:'',
        valuationNight:'',
        valuationSpecial:'',
        valuationCarType:'',
        valuationSumPrice:'',
        orderNumber:''
      },
      dialogForm: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      RequestValuation:{
        orderNumber:'',
        valuationTollPrice:0,
      },
      requestUpdate: {
        orderNumber: '',
        driverStatus: ''
      },
      tableData: [],
      userIdd: 0.0
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    queryValuation(row){
      this.RequestValuation.orderNumber= row.orderNumber
      // this.RequestValuation.valuationTollPrice=0
       console.log(this.RequestValuation)
      valuationOrderByNumber(this.RequestValuation).then(res => {
        this.dialogForm = true
        console.log(res)
        this.orderInfo = res.data

      })
    },
    gathering(){
      console.log(this.RequestValuation)
      valuationOrderByNumber(this.RequestValuation).then(res => {
        //console.log(res)
        this.requestUpdate.driverStatus = 5
        this.requestUpdate.orderNumber = this.RequestValuation.orderNumber
        console.log(this.requestUpdate)
        updateUserReach(this.requestUpdate).then(res => {
          this.dialogFormVisible = false
          alert("收款信息已发送 ")
          location.reload()
        })

      })
    },
    //发起收款
    sponsorGathering(orderNumber) {
      this.dialogFormVisible = true
      this.RequestValuation.orderNumber = orderNumber
    },
    //到达目的地
    driverDestination(orderNumber) {
      this.requestUpdate.driverStatus = 4
      this.requestUpdate.orderNumber = orderNumber
      //console.log(this.requestUpdate)
      updateUserReach(this.requestUpdate).then(res => {
        alert("已到达目的地")
        location.reload()
      })
    },
    //乘客已上车
    passengerAboard(orderNumber) {
      this.requestUpdate.driverStatus = 3
      this.requestUpdate.orderNumber = orderNumber
      //console.log(this.requestUpdate)
      updateUserReach(this.requestUpdate).then(res => {
        alert("乘客已上车,正在前往目的地")
        location.reload()
      })
    },
    //司机已到达
    driverArriveOrigin(orderNumber) {
      this.requestUpdate.driverStatus = 2
      this.requestUpdate.orderNumber = orderNumber
      //console.log(this.requestUpdate)
      updateUserReach(this.requestUpdate).then(res => {
        alert("司机已到达起点,等待乘客上车")
        location.reload()
      })
    },
    info() {
      getInfo().then(res => {
        this.userIdd = res.data.user.userId
        selectOrderByDriverId(this.userIdd).then(res => {
          //console.log(res)
          // let assign = Object.values(res)
          this.tableData = res.data
        })
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.info()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

</style>
